<script setup>
import { reactive, ref, nextTick } from "vue";
/**
 * 判断传入参是否为数字
 * @param {Number|String} n 数字
 * @returns {Boolean}
 * 返回    true 是数字   false 不是数字
 */
const isNum = (n) => {
    return ["number", "string"].includes(typeof n) && !isNaN(n);
};
const emit = defineEmits(["update:modelValue"]);
let props = defineProps({
    //  visible:Boolean,
    //组件的model值
    modelValue:{
      type:Boolean,
    },
    bgColor: {
        type: String,
        default: "rgba(0, 0, 0, 0.3)",
    },
    title: {
        type: [String, Number],
        default: "",
    },
    height: {
        type: [String, Number],
        default: "400px",
    },
    width: {
        type: [String, Number],
        default: "600px",
    },
    maxHeight: {
        type: [String, Number],
        default: "unset",
    },
    maxWidth: {
        type: [String, Number],
        default: "unset",
    },
    minHeight: {
        type: [String, Number],
        default: "unset",
    },
    minWidth: {
        type: [String, Number],
        default: "unset",
    },
    borderRadius: {
        type: [String, Number],
        default: "none",
    },
    icon: {
        type: String,
        default: "./light-win/logo.png",
    },
    /**
     * 背景点击是否关闭窗口(开关)
     */
    clickBgClose: {
        type: Boolean,
        default: false,
    },
    /**
     * 是否显示关闭图标(开关)
     */
    showCloseIcon: {
        type: Boolean,
        default: true,
    },
});
let draged = ref(false);
let zIndex = ref(2000); //2000是默认值
const mDom = ref(null);
const dDom = ref(null);
let innerHeightPx=ref(`${window.innerHeight}px`)
const s = reactive({
    width: "600px",
    height: "400px",
    borderRadius: "none",
    maxHeight: "unset",
    maxWidth: "unset",
    minHeight: "unset",
    minWidth: "unset",
});
initWin();
getMaxZindex();
/**
 * 动态生成最大zIndex遮罩层
 */
function getMaxZindex() {
    nextTick(() => {
        let winEls = document.querySelectorAll(".light-window__bg");
        let arr;
        let len = winEls.length;
        if (len > 1) {
            arr = [];
            for (let index = 0; index < len; index++) {
                const el = winEls[index];
                arr.push(el.style.zIndex);
            }
            zIndex.value = Math.max(...arr) + 1;
        } else {
            zIndex.value = 2000;
        }
    });
}

/**
 * 移动端兼容处理
 */
function mobileTouch(e) {
    let e0 = e.targetTouches[0];
    dragStart(e0, true);
}

/**
 * 拖拽
 */
function dragStart(e,isMob) {
    let { x, y } = dDom.value.getBoundingClientRect();
    let offsetY = e.clientY - y;
    let offsetX = e.clientX - x;
    const _setPosition=(e)=>{
          draged.value = true;
          mDom.value.style.top = e.clientY - offsetY + "px";
          mDom.value.style.left = e.clientX - offsetX + "px";
    }
    if(isMob){
      document.ontouchmove = (e) => {
        e=e.targetTouches[0];
         _setPosition(e)
      };
      document.ontouchend = () => {
          document.ontouchmove = null;
      };
    }else{
      document.onmousemove = _setPosition;
      document.onmouseup = () => {
          document.onmousemove = null;
      };
    }
}
/**
 * 处理背景点击事件
 */
function handleBgClick() {
    props.clickBgClose && closeWin();
}
function closeWin() {
    emit("update:modelValue", false);
}
/**
 * 初始化弹框属性
 */
function initWin() {
    let sProperties = Object.keys(s);
    let len = sProperties.length;
    for (let index = 0; index < len; index++) {
        const p = sProperties[index];
        s[p] = props[p] + (isNum(props[p]) ? "px" : "");
    }
}
</script>

<template>
    <Teleport to="body">
        <div
            @click="handleBgClick"
            class="light-window__bg"
            :style="{
                zIndex,
                backgroundColor: bgColor,
                '--b-radius': s.borderRadius,
                height:innerHeightPx
            }"
        >
            <div
                class="main"
                ref="mDom"
                :class="{
                    not_draged: !draged,
                }"
                :style="{
                    height: s.height,
                    width: s.width,
                    borderRadius: s.borderRadius,
                    'max-height': s.maxHeight,
                    'max-width': s.maxWidth,
                    'min-height': s.minHeight,
                    'min-width': s.minWidth,
                }"
                @click.stop
            >
                <div
                    class="window_title"
                    ref="dDom"
                    @mousedown="dragStart"
                    @touchstart="mobileTouch"
                >
                    <img
                        v-if="icon"
                        class="t_icon"
                        :src="icon"
                        alt=""
                        @mousedown.stop
                    />
                    <span>{{ title }}</span>
                    <div
                        @mousedown.stop
                        @click="closeWin"
                        class="icon"
                        title="关闭"
                        v-if="showCloseIcon"
                    >
                        <svg
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="24"
                            height="24"
                        >
                            <path
                                d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
                                fill="#606266"
                            ></path>
                        </svg>
                    </div>
                </div>
                <slot></slot>
            </div>
        </div>
    </Teleport>
</template>

<style scoped>
@import url("./index.min.css");
</style>
